import React, {Component}      from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Text,
    TextInput,
    Dimensions,
    TouchableOpacity
}      from 'react-native';
import ListItemDivider         from '../../views/ListItemDivider.js';
import BaseNavigationBar       from '../../views/BaseNavigationBar';
import  LinearGradient         from 'react-native-linear-gradient';
import  VerifyCode             from 'react-native-verify-code';
import Toast, {DURATION}       from 'react-native-easy-toast';
import LoadingView             from '../../views/LoadingView';
import Utils                   from '../../utils/utils';
import * as BaseAPI from "../../utils/BaseAPI";
const {width,height} = Dimensions.get('window');

export default class CashBalanceScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            inputUsername: '',
            phone: '',
            code: '',
            showProgress:false
        };
    }

    popToBack(){
        this.props.navigation.goBack()
    }

    // 提现
    goSubmitData(){

    }

    startCountdown = ()=>{
        // 获取短信数据
        this.requestSMSCode();
    }

    onValueChange = (text)=>{
        this.setState({code:text.trim()});
    }

    // componentWillUnmount() {
    //     this.timer && clearTimeout(this.timer);
    // }

    beforeCountdown = ()=>{
        // 手机号
        var phoneStr = this.state.phone;
        if (!phoneStr.length) {
            this.refs.toast.show('手机号不能为空');
            return false;
        } else if (!Utils.isPhoneAvailable(phoneStr)) {
            this.refs.toast.show('手机号不正确');
            return false;
        } else {
            return true;
        }
    }

    requestSMSCode(){
        this.setState({showProgress:true});
        fetch(BaseAPI.GetCodeUrl+this.state.phone, {
            method:'GET'
        }).then((res)=>res.json())
            .then((json)=>{

                this.setState({showProgress:false});
                if (json.ret === 0 ) {
                    this.refs.toast.show('短信已发送,请注意查收');
                }
                else {
                    this.refs.toast.show('短信获取失败,请过段时间重新获取');
                }
            })
            .catch((e)=>{
                this.setState({showProgress:false});
                // // 网络错误
                this.refs.toast.show('网络请求出错：' + e);
            })
    }


    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'现金余额'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>
                <ScrollView>
                    <View style={{justifyContent:'center',alignItems:'center',backgroundColor:'#ff4114',height:0.56*200}}>
                        <Text style = {{fontSize:14,marginLeft:0.56*20,textAlign:'center',marginTop:0.56*30,color:'#fefcfc',}}>
                            账户余额(元)</Text>
                        <Text style = {{fontSize:40,marginLeft:0.56*20,textAlign:'center',marginTop:0.56*10,color:'#fefcfc',}}>
                            4500</Text>
                    </View>

                    <View >
                    </View>







                    {/*微信账号*/}
                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>微信账号</Text>
                        <TextInput
                            multiline={false}
                            placeholder='请输入微信账号名'
                            style={styles.detailStyle}
                            underlineColorAndroid="transparent"
                            onChangeText={(text) => {
                                this.setState({name: text.trim()})
                            }} />
                    </View>
                    <ListItemDivider/>

                    {/*收款人姓名*/}
                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>收款人姓名</Text>
                        <TextInput
                            multiline={false}
                            placeholder='请输入实名认证的姓名'
                            style={styles.detailStyle}
                            underlineColorAndroid="transparent"
                            onChangeText={(text) => {
                                this.setState({name: text.trim()})
                            }} />
                    </View>
                    <ListItemDivider/>

                    {/*手机号码*/}
                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>手机号码</Text>
                        <TextInput
                            multiline={false}
                            placeholder='请输入手机号码'
                            style={styles.detailStyle}
                            underlineColorAndroid="transparent"
                            onChangeText={(text) => {
                                this.setState({name: text.trim()})
                            }} />
                    </View>
                    <ListItemDivider/>

                    {/*验证码*/}
                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>验证码</Text>
                        <View style={styles.codeViewStyle}>
                            <VerifyCode style={styles.detailStyle}
                                        placeholder='请输入验证码'
                                        placeholderTextColor='#b0afaf'
                                        countdownNormalStyle={styles.countdownNormalStyle}
                                        countdownStartStyle={styles.countdownStartStyle}
                                        countdownEndStyle={styles.countdownEndStyle}
                                        countdownNormalTextStyle={styles.countdownNormalTextStyle}
                                        countdownStartTextStyle={styles.countdownStartTextStyle}
                                        countdownEndTextStyle={styles.countdownEndTextStyle}
                                        maxTime={60}
                                        normalTxt='获取验证码'
                                        countdownTxt='S'
                                        endTxt='再次获取'
                                // auto={false}
                                        beforeCountdown={this.beforeCountdown}
                                        startCountdown={this.startCountdown}
                                        onValueChange={this.onValueChange}/>
                        </View>
                    </View>

                    <ListItemDivider/>

                    {/*提现金额*/}
                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>提现金额</Text>
                        <TextInput
                            multiline={false}
                            placeholder='请输入提现金额'
                            style={styles.detailStyle}
                            underlineColorAndroid="transparent"
                            onChangeText={(text) => {
                                this.setState({name: text.trim()})
                            }} />
                    </View>
                    <ListItemDivider/>

                    <View style={styles.tipViewStyle}>
                        <Text style={styles.tipTitleStyle}>您最多可提取的金额,且必须大于一百</Text>
                    </View>


                    <TouchableOpacity activeOpacity={1} onPress={this.goSubmitData.bind(this)}>
                        <LinearGradient colors={['#fe7133','#ff4114']} style={styles.linearGradient}>
                            <Text style={{color:'#fdfdfd',fontSize:14}}>提现</Text>
                        </LinearGradient>
                    </TouchableOpacity>

                </ScrollView>

                <Toast
                    ref="toast"
                    position='center'/>

                { this.state.showProgress ?
                    (<LoadingView cancel={() => this.setState({showProgress:false})}/>):(null)}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    titleViewStyle:{
        backgroundColor:'white',
        height:0.56*80,
        width:width,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    // titleViewStyle:{
    //     backgroundColor:'white',
    //     height:0.56*130,
    //     width:width,
    //     flexDirection:'row',
    //     justifyContent:'center',
    //     alignItems:'center'
    // },
    titleStyle:{
        fontSize:15,
        left:0.65*12,
        color:'#353535',
        width:width/3,
        textAlign:'left'
    },
    detailStyle:{
        flex:1,
        marginLeft:0.65*12,
        fontSize:13,
        color:'#909090'
    },
    codeViewStyle:{
        backgroundColor:'white',
        height:0.56*75,
        width:width*2/3,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    },
    tipViewStyle:{
        backgroundColor:'white',
        height:0.56*60,
        // width:width
        // alignItems:'center'
    },
    tipTitleStyle:{
        fontSize:12,
        color:'#878686',
        // width:width,
        // padding:10,
        margin:10,
        // marginLeft:0.56*10
    },
    linearGradient: {
        justifyContent:'center',
        alignItems:'center',
        height:0.56*70,
        marginLeft:0.56*40,
        marginRight:0.56*40,
        marginTop:0.56*40,
        borderRadius:0.56*20
    }
});
